<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布房源</title>
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.css">
    <link href="../plugins/layui/css/layui.css" rel="stylesheet">
    <script src="../plugins/jquery/jquery.min.js"></script>
    <!-- 引入bootstrap.min.js / bootstrap.js -->
    <script src="../plugins/bootstrap/js/bootstrap.js"></script>
    <script src="../plugins/layui/layui.js"></script>
    <link rel="stylesheet" href="../css/top-nav.css">
    <link rel="stylesheet" href="../css/bottom-cav.css">
</head>
<body   style="background-color:white;" >
    <!-- 导航栏 -->
    <div class="class-outer"  style="background-color:rgba(167, 163, 163, 0.055);"  >
      <div class="top-nav">
          <div class="pos">
              <a href="">
                  <span class="glyphicon glyphicon-map-marker" style="font-weight: bold;color:black;">&nbsp;吴中区</span>
              </a>
          </div> 
          <div class="cen-nav"    > 
                <ul class="layui-nav" style="font-weight:bolder;" >
                  
                  <li class="layui-nav-item"><a href="">首页</a></li>
                  
                  <li class="layui-nav-item"><a href="">立即找房</a></li>
                  <li class="layui-nav-item"><a href="">合租</a></li>
                  <li class="layui-nav-item"><a href="">整租</a></li>
                  <li class="layui-nav-item"><a href="">社区</a></li>
                  <li class="layui-nav-item"><a href="">整租</a></li>
                  <li class="layui-nav-item"><a href="">社区</a></li>
                <span class="layui-nav-bar" style="left: 422px; top: 55px; width: 0px; opacity: 0;"></span></ul>
          </div>
        
      </div>
    </div>

    
    <div class="container-fluid">
        <div class="row">        
          <div class="layui-carousel" id="test3" lay-filter="test4"  style="margin:auto;">
            <div carousel-item="">
              <div>            
                <img src="../imgs/release_house_one.jpg"    class="img-responsive" alt="Responsive image "  style="margin:auto;">  
              </div>
              <div>
                <img src="../imgs/release_house_two.jpg"    class="img-responsive" alt="Responsive image "  style="margin:auto;"> 
              </div>
              <div>
                <img src="../imgs/release_house_three.jpg"   class="img-responsive" alt="Responsive image "  style="margin:auto;">  
              </div>
              <div>
                <img src="../imgs/release_house_four.jpg"    class="img-responsive" alt="Responsive image "  style="margin:auto;">  
              </div>
       
            </div>
          </div>                               
          
        </div>

        
    </div>
    <div class="container"  >
        <div class="row">
            
            <p  style="font-size: 28px;text-align: center;font-weight:bold;padding-top: 20px;padding-bottom: 20px;">
                填写您的基本信息，发布房源
                <hr>
            </p>           
           
        </div>


    </div>
    <div class="container"  >          
      
          
          <form class="layui-form layui-form-pane" action=""  style="padding-left:400px;padding-top:10px;"   >                 
            <div class="layui-form-item"  >
              <label class="layui-form-label">姓名</label>
              <div class="layui-input-inline">
                <input type="text" name="username" lay-verify="username" placeholder="请输入姓名" autocomplete="off" class="layui-input">
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">手机号</label>
              <div class="layui-input-inline">
                <input type="text" name="phone" lay-verify="phone" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
              </div>
            </div>

            <!-- <div class="layui-form-item" pane=""> -->
            <div class="layui-form-item" >
              <label class="layui-form-label">性别</label>
              <div class="layui-input-inline">
                <!-- <input type="radio" name="sex" value="男" title="男" checked=""> -->
                <input type="radio" name="sex" value="男" title="男" >
                <input type="radio" name="sex" value="女" title="女">
              
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">年龄</label>
              <div class="layui-input-inline">
                <input type="text" name="age" lay-verify="age" placeholder="请输入年龄" autocomplete="off" class="layui-input">
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">身份证号</label>
              <div class="layui-input-inline">
                <input type="text" name="IDnumber" lay-verify="IDnumber" placeholder="请输入身份证号" autocomplete="off" class="layui-input">
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">邮箱</label>
              <div class="layui-input-inline">
                <input type="text" name="emails" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
              </div>
            </div>

            

            
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">处理日期</label>
                <div class="layui-input-block">
                  <input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
                </div>
              </div>              
            </div>

            
            
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">价格</label>
                <div class="layui-input-inline" style="width: 100px;">
                  <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 100px;">
                  <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
            
            <div class="layui-form-item">
              <label class="layui-form-label">出租方式（合租或整租房源）</label>
            
              <div class="layui-input-inline">
     
                <select name="house_rent_type" >
                  <option value=""></option>
                  <option value="0">整租房源</option>
                  <option value="1" selected="">合租房源</option>                  
                </select>
              </div>
            </div>
            
            <div class="layui-form-item">
              <label class="layui-form-label">房源地址</label>
              <div class="layui-input-inline"   style="width:90px;">
                <select name="quiz1">
                  <option value="">请选择省</option>
                  <option value="江苏省" selected="">江苏省</option>
                 
                </select>
              </div>
              <div class="layui-input-inline" style="width:80px;">
                <select name="quiz2">
                  <option value="">请选择市</option>
                  <option value="苏州" selected="">苏州</option>                 
                </select>
              </div>
              <div class="layui-input-inline" style="width:120px;">
                <select name="quiz3">
                  <option value="">请选择区</option>
                  <option value="姑苏区">姑苏区</option>
                  <option value="虎丘区">虎丘区</option>
                  <option value="吴中区">吴中区</option>
                  <option value="相城区">相城区</option>
                  <option value="吴江区">吴江区</option>
                  <option value="常熟市">常熟市</option>
                  <option value="张家港市">张家港市</option>
                  <option value="昆山市">昆山市</option>
                  <option value="太仓市">太仓市</option>
                  <option value="苏州工业园区">苏州工业园区</option>

                </select>
              </div>      
            </div>
            



            <div class="layui-form-item">
              <label class="layui-form-label">小区名称</label>
              <div class="layui-input-inline">
                <input type="text" name="xiaoquname" lay-verify="required" placeholder="请输入小区名称" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">门牌号</label>
              <div class="layui-input-inline">
                <input type="text" name="house_number" lay-verify="required" placeholder="请输入门牌号" autocomplete="off" class="layui-input">
              </div>
            </div>

            <div class="layui-form-item">

              <label class="layui-form-label">整套面积</label>
              <div class="layui-input-inline">
                <input type="text" name="house_area" lay-verify="required" placeholder="请输入房源面积" autocomplete="off" class="layui-input">
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">户型</label>
              <div class="layui-input-inline"   style="width:50px;">
                <input type="text" name="house_shi" placeholder="室" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">室</div>
            
              <div class="layui-input-inline"  style="width:50px;">
                <input type="text" name="house_ting" placeholder="厅" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">厅</div>

              <div class="layui-input-inline"   style="width:50px;">
                <input type="text" name="house_chu" placeholder="厨" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">厨</div>

              <div class="layui-input-inline"   style="width:50px;">
                <input type="text" name="house_wei" placeholder="卫" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">卫</div>
            </div>




           
           



            
            
            <div class="layui-form-item layui-form-text">
              <label class="layui-form-label"   style="width:400px;">房源描述</label>
              <div class="layui-input-block"    style="width:400px;height:auto">
                <textarea placeholder="请输入房源的相关描述" class="layui-textarea"></textarea>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button type="submit" style="background-color: red;"   class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary"    style="background-color: red;color:white;" >重置</button>
              </div>
            </div>           
          </form>
                    
         
          
          
    </div>

    <!-- 页脚 -->
    <div class="buttom_nav">
            
      <div class="buttom_nav_center">
          <div class="recommend-area-rent">
              <div class="title">
                  推荐区域租房
              </div>
              <div class="recommend-content">
                  <span class="">
                      <a href="">吴中</a>
                      <a href="">吴江</a>
                      <a href="">园区</a>
                      <a href="">太仓</a>
                      <a href="">姑苏区</a>
                      <a href="">常说</a>
                      <a href="">平江</a>
                      <a href="">张家港</a>
                      <a href="">高新区</a>
                      <a href="">沧浪</a>
                      <a href="">相城</a>
                      <a href="">昆山</a>
                      <a href="">金阊</a>
                    </span>
              </div>
          </div>
          <div style="border-top: 1px solid #8b8d92;margin-top: 80px;height: 15px;"></div>
          <div class="recommend-subway-rent">
              <div class="title">
                  推荐地铁租房
              </div>
              <div class="recommend-content">
                  <span class="">
                      <a href="">1号线</a>
                      <a href="">2号线</a>
                      <a href="">3号线</a>
                      <a href="">4号线支线</a>
                      <a href="">4号线</a>
                    </span>
              </div>
          </div>
          <div style="border-top: 1px solid #8b8d92;margin-top: 40px;height: 15px;"></div>
          <div class="Recommend-type-rent">
              <div class="title">
                  推荐类型租房
              </div>
              <div class="recommend-content">
                  <span>
                      <a href="">苏州合租</a>
                      <a href="">苏州整租</a>
                      <a href="">苏州公寓</a>
                    </span>
              </div>
          </div>
          <div style="border-top: 1px solid #8b8d92;margin-top: 40px;height: 15px;"></div>
          <div id="about-suleju">
              <div class="title" style="float: left;width: 200px;height: 300px;">
                  <div style="width: 200px;">
                      关于苏乐居
                  </div>
                  <div class="recommend-content" style="width:100px;margin-top: 0px;font-weight: normal;">
                      <span>
                          <a href="">伙伴登录</a>
                          <a href="" style="margin-top: 10px;display: block;">网站地图</a>
                        </span>
                  </div>
              </div>
              <div class="title" style="float: left;width: 200px;">
                  <div style="width: 200px;">
                      苏乐居合作公寓
                  </div>
                  <div class="recommend-content" style="width:140px;margin-top: 0px;font-weight: normal;">
                      <span>
                          <a href="">青年汇</a>
                          <a href="" style="margin-top: 10px;display: block;">银桥公寓</a>
                          <a href="" style="margin-top: 10px;display: block;">爱家精品公寓</a>
                        </span>
                  </div>
              </div>
              <div class="title" style="float: left;width: 200px;">
                  <div style="width: 200px;">
                      意见回馈
                  </div>
                  <div class="recommend-content" style="width:100px;margin-top: 0px;font-weight: normal;">
                      <span>
                          <a href="">mail:2308844@qq.com</a>
                        </span>
                  </div>
              </div>
              <div class="title" style="float: left;width: 200px;">
                  <div style="width: 200px;">
                      联系苏乐居
                  </div>
                  <div class="recommend-content" style="width:300px;margin-top: 0px;font-weight: normal;">
                      <span>
                          <a href="">10106006</a>
                          <br>
                          <br>
                          <a href="">周一～周日 8:00～23:00</a>
                        </span>
                  </div>
              </div><br>
              <div id="max-buttom-info">
                  <div id="suleju-web-info">
                      <div style="width:300px;margin-left:-110px">
                          ©2015 上海万间信息技术有限公司
                      </div>  
                      <a href="" style="margin-right: 25px;">
                          隐私协议 
                      </a>
                      <a href="">服务协议</a>
                      <div style="width:300px;margin-left:30px;margin-right: 30px;">上海市浦东新区晨晖路78号 金蝶软件园</div>
                     
                  </div>
                  <div id="suleju-web-info">
                      <div style="width: 25px;height: 23px;
                       margin-left: -130px;background-image: url(imgs/gongan.png);background-size: 100%;">
  
                      </div>
                      <a style="width:260px;margin-left:-100px">
                          沪公网安备31011504006937号  
                      </a>  
                      <div style="width:300px;margin-left:0px;">增值电信业务许可证：沪B2-20570251</div>
                      
                  </div>
                 
              </div>
              
          </div>
      </div>
      
  </div>
  

    <script>
        layui.use(['form', 'util', 'laydate'], function(){
          var form = layui.form;
          var layer = layui.layer;
          var util = layui.util;
          var laydate = layui.laydate;
          
          //日期
          laydate.render({
            elem: '#date'
          });
          laydate.render({
            elem: '#date1'
          });

          //自定义验证规则
          form.verify({
            // username: function(value){
            //   if(value.length < 2){
            //     return '名字至少是两个汉字';
            //   }
            // }
            username: [
               /^[\u4E00-\u9FA5]{2,4}$/
               ,'请输入2至4个汉字'
            ]







            


            ,age :[
                  /^[1-9]\d*$/
                //年龄在1到100
                  ,'请输入正确的年龄'
            ]
















            ,IDnumber: [
                  /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/
                  ,'请输入正确的身份证号'
            ]
            

            
          });
         
          // //自定义验证规则
          // form.verify({
          //   title: function(value){
          //     if(value.length < 5){
          //       return '标题至少得5个字符啊';
          //     }
          //   }
          //   ,pass: [
          //     /^[\S]{6,12}$/
          //     ,'密码必须6到12位，且不能出现空格'
          //   ]
          // });
          
          // //指定开关事件
          // form.on('switch(switchTest)', function(data){
          //   layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
          //     offset: '6px'
          //   });
          //   layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
          // });
          
          //提交事件
          form.on('submit(demo1)', function(data){
            alert(JSON.stringify(data.field), {
              title: '最终的提交信息'
            })
            return false;
          });
         
          // //表单赋值
          // layui.$('#LAY-component-form-setval').on('click', function(){
          //   form.val('example', {
          //     "username": "贤心" // "name": "value"
          //     ,"password": "123456"
          //     ,"interest": 1
          //     ,"like[write]": true //复选框选中状态
          //     ,"close": true //开关状态
          //     ,"sex": "女"
          //     ,"desc": "我爱 layui"
          //   });
          // });
          
          //表单取值
          layui.$('#LAY-component-form-getval').on('click', function(){
            var data = form.val('example');
            alert(JSON.stringify(data));
          });
          // // 普通事件
          // util.on('lay-on', {
          //   // 获取验证码
          //   "get-vercode": function(othis){
          //     var isvalid = form.validate('.demo-phone'); // v2.7.0 新增 
          //     // 验证通过
          //     if(isvalid){
          //       layer.msg('手机号验证通过，执行发送验证码的操作');
          //     }
          //   }
          // });
          
        });
    </script>

  <!-- 轮播 -->
  <script>
  layui.use(['carousel', 'form'], function(){
    var carousel = layui.carousel
    ,form = layui.form;
    
    //常规轮播
    carousel.render({
      elem: '#test1'
    });
    
    //改变下时间间隔、动画类型、高度
    carousel.render({
      elem: '#test2'
      ,interval: 1800
      ,anim: 'fade'
      ,height: '120px'
    });
    
    //设定各种参数
    var ins3 = carousel.render({
      elem: '#test3'
    });
    //图片轮播
    carousel.render({
      elem: '#test10'
      ,width: '720px'
      ,height: '360px'
      ,interval: 3000
    });
    
    //事件
    carousel.on('change(test4)', function(res){
      console.log(res)
    });
    
    var $ = layui.$, active = {
      set: function(othis){
        var THIS = 'layui-bg-normal'
        ,key = othis.data('key')
        ,options = {};
        
        othis.css('background-color', '#5FB878').siblings().removeAttr('style'); 
        options[key] = othis.data('value');
        ins3.reload(options);
      }
    };
    
    //开关事件
    form.on('switch(autoplay)', function(){
      ins3.reload({
        autoplay: this.checked
      });
    });
    // 自动播放控制
    form.on('select(autoplay)', function (obj) {
      // debugger;
      var autoplayValue = parseInt(obj.value);
      ins3.reload({
        autoplay: isNaN(autoplayValue) ? obj.value : autoplayValue
      });
    })
    
    $('.demoSet').on('keyup', function(){
      var value = this.value
      ,options = {};
      if(!/^\d+$/.test(value)) return;
      
      options[this.name] = value;
      ins3.reload(options);
    });
    
    //其它示例
    $('.demoTest .layui-btn').on('click', function(){
      var othis = $(this), type = othis.data('type');
      active[type] ? active[type].call(this, othis) : '';
    });
  });
  </script>

    
    
</body>
</html>